messageTray: Stop tweening custom opacity property

Notifications use a transition that overshoots the target value, however
we can only really do that for the position and not the opacity where
some values would end up out of the valid range.

We currently address this by proxying the actual opacity property in a
javascript property, and clamp it to the valid range in an onUpdate()
callback.

This won't be an option if we want to use Clutter animations, so instead,
use separate tweens for opacity and position.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/22

diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index 77d4364b096e71f4a5fa88c8cc5424829b6a0e3e..920e71b1d073983ffe242ea8a74a059611789c4b 100644 (file)
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -1249,10 +1249,6 @@ var MessageTray = class MessageTray {
         this._notificationExpired = false;
     }
 
-    _clampOpacity() {
-        this._bannerBin.opacity = Math.max(0, Math.min(this._bannerBin._opacity, 255));
-    }
-
     _onIdleMonitorBecameActive() {
         this._userActiveWhileNotificationShown = true;
         this._updateNotificationTimeout(2000);
@@ -1279,7 +1275,6 @@ var MessageTray = class MessageTray {
 
         this._bannerBin.add_actor(this._banner.actor);
 
-        this._bannerBin._opacity = 0;
         this._bannerBin.opacity = 0;
         this._bannerBin.y = -this._banner.actor.height;
         this.actor.show();
@@ -1327,12 +1322,15 @@ var MessageTray = class MessageTray {
 
         this._notificationState = State.SHOWING;
         Tweener.removeTweens(this._bannerBin);
+        Tweener.addTween(this._bannerBin, {
+            opacity: 255,
+            time: ANIMATION_TIME / 1000,
+            transition: 'linear'
+        });
         Tweener.addTween(this._bannerBin, {
             y: 0,
-            _opacity: 255,
             time: ANIMATION_TIME / 1000,
             transition: 'easeOutBack',
-            onUpdate: () => this._clampOpacity,
             onComplete: () => {
                 this._notificationState = State.SHOWN;
                 this._showNotificationCompleted();
@@ -1400,12 +1398,15 @@ var MessageTray = class MessageTray {
         if (animate) {
             this._notificationState = State.HIDING;
             Tweener.removeTweens(this._bannerBin);
+            Tweener.addTween(this._bannerBin, {
+                opacity: 0,
+                time: ANIMATION_TIME / 1000,
+                transition: 'linear'
+            });
             Tweener.addTween(this._bannerBin, {
                 y: -this._bannerBin.height,
-                _opacity: 0,
                 time: ANIMATION_TIME / 1000,
                 transition: 'easeOutBack',
-                onUpdate: () => this._clampOpacity,
                 onComplete: () => {
                     this._notificationState = State.HIDDEN;
                     this._hideNotificationCompleted();